<template>
  <div class="foot_main">
		<h1 style="font-size:3em"><span style="color:#ffcc33;font-size:1.5em">"硒"</span>都美食一览</h1>
		<span style="color:#b2b2b2">作为一名资深吃货，我的梦想是：吃不胖然后吃遍天下！那么你呢？</span>
    <el-collapse style="margin-top:3em">
      <el-collapse-item
        v-for="(item, index) in footAdderssList"
        :key="index"
        style=""
        :name="index"
      >
        <template #title>
          <span
            :class="{
              margin_one: index % 2 == 0 ? true : false,
              margin_two: index % 2 == 0 ? false : true,
            }"
            >{{ item.addressName }}</span
          >
        </template>
        <div
          class="foot_message"
          v-for="(items, index) in item.footMessage"
          :key="index"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
              :src="items.imageUrl"
              class="image"
            />
            <div style="padding: 14px">
              <h1 style="margin:0;font-size:2em">{{items.name}}</h1>
              <div class="bottom">
								<span style="font-size:1.5em;text-indent: 2em;">{{items.description}}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { footList, footAddress } from "@/utils/fetch/api";
import { ElCollapse } from "element-plus";
import { useStore } from "@/store/index"
export default defineComponent({
  components: {
    ElCollapse,
  },
  setup() {
    const footAdderssList = ref<any>();
    const footListData = ref<any>("1");
    const params = {
      pageNum: 1,
    };

    const store = useStore();

    const refresh = async () => {
      const datas = await footAddress();
      footAdderssList.value = datas.data;

      const data = await footList(params);
      footListData.value = data.data.data;

      footAdderssList.value.forEach((item: any) => {
        item.footMessage = [];
        footListData.value.forEach((items: any) => {
          if (item.addressName == items.foodAddress) {
            item.footMessage.push(items);
          }
        });
      });

      store.state.isLoading = false
    };

    onMounted(() => {
      refresh();
    });
    return {
      footListData,
      footAdderssList,
    };
  },
});
</script>

<style lang="less" scoped>
.foot_main {
	background: white;
	min-height: 45em;
  .margin_two {
    font-size: 2em;
    margin-left: 10em;
    color: #ffcc33;
  }
  .margin_one {
    font-size: 2em;
    margin-left: 2em;
  }

  .foot_message {
    width: 100%;
		padding: 1em;
		overflow: hidden;
  }
}

.el-card{
	width: 30em;
	display: inline-block;
	float: left;
}

.el-card::after{
	clear: both;
}

.bottom {
  margin-top: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 30em;
  display: block;
}
</style>
